1. syyskuuta 2025Suomi

Kattava opas Frontend-suorituskyky-API:n hyödyntämiseen sivun latausmittareiden keräämisessä ja analysoinnissa verkkosivuston suorituskyvyn parantamiseksi maailmanlaajuiselle yleisölle.

Frontend-suorituskyky-API:n navigointi: Sivun latausmittareiden keräämisen hallinta

Nykypäivän digitaalisessa maailmassa verkkosivuston suorituskyky on ensiarvoisen tärkeää. Hitaasti latautuva sivusto voi johtaa turhautuneisiin käyttäjiin, hylättyihin ostoskoreihin ja lopulta menetettyihin tuloihin. Frontend-suorituskyvyn optimointi on kriittistä positiivisen käyttäjäkokemuksen tarjoamiseksi riippumatta siitä, missä päin maailmaa käyttäjäsi sijaitsevat. Frontend Performance API tarjoaa tehokkaita työkaluja sivun latauksen eri osa-alueiden mittaamiseen ja analysointiin. Tämä kattava opas opastaa sinua hyödyntämään Navigation Timing API:a ja muita suorituskykyyn liittyviä rajapintoja kerätäksesi ja ymmärtääksesi keskeisiä sivun latausmittareita, mikä mahdollistaa pullonkaulojen tunnistamisen ja verkkosivustosi nopeuden ja reagoivuuden parantamisen maailmanlaajuiselle yleisölle.

Sivun latausmittareiden tärkeyden ymmärtäminen

Sivun latausmittarit tarjoavat arvokasta tietoa siitä, kuinka nopeasti verkkosivustosi latautuu ja tulee interaktiiviseksi käyttäjille. Nämä mittarit ovat ratkaisevan tärkeitä useista syistä:

Käyttäjäkokemus: Nopeammin latautuva sivusto tarjoaa sulavamman ja nautinnollisemman käyttäjäkokemuksen, mikä johtaa lisääntyneeseen sitoutumiseen ja tyytyväisyyteen. Kuvittele Tokiossa oleva käyttäjä yrittämässä päästä verkkokauppaasi; hidas latauskokemus johtaa todennäköisesti siihen, että hän hylkää ostoksensa.
SEO-sijoitus: Googlen kaltaiset hakukoneet ottavat sivun nopeuden huomioon sijoitustekijänä. Verkkosivustosi suorituskyvyn optimointi voi parantaa näkyvyyttäsi hakukoneissa.
Konversioprosentit: Tutkimukset ovat osoittaneet suoran korrelaation sivun latausajan ja konversioprosenttien välillä. Nopeammin latautuvat sivut johtavat usein korkeampiin konversioprosentteihin, erityisesti alueilla, joilla on hitaammat internetyhteydet.
Mobiilioptimointi: Mobiililaitteiden käytön lisääntyessä mobiilisuorituskyvyn optimointi on välttämätöntä. Sivun latausajat voivat vaikuttaa merkittävästi mobiilikäyttäjäkokemukseen, erityisesti alueilla, joilla kaistanleveys on rajallinen. Esimerkiksi Intiassa 3G-yhteyksiä käyttävät käyttäjät arvostavat nopeasti latautuvaa sivustoa enemmän kuin käyttäjät, joilla on nopeat kuituyhteydet.
Globaali kattavuus: Suorituskyky voi vaihdella merkittävästi käyttäjän maantieteellisen sijainnin, verkko-olosuhteiden ja laitteen ominaisuuksien mukaan. Suorituskyvyn seuranta eri alueilta auttaa tunnistamaan alueita, joilla optimointia tarvitaan.

Esittelyssä Frontend-suorituskyky-API

Frontend-suorituskyky-API on kokoelma JavaScript-rajapintoja, jotka tarjoavat pääsyn verkkosivujen suorituskykyyn liittyvään dataan. Tämä API antaa kehittäjille mahdollisuuden mitata sivun latausajan eri osa-alueita, resurssien latautumista ja muita suorituskykyominaisuuksia. Navigation Timing API, joka on keskeinen osa Frontend-suorituskyky-API:a, tarjoaa yksityiskohtaista ajoitustietoa sivun latausprosessin eri vaiheista.

Suorituskyky-API:n keskeiset komponentit:

Navigation Timing API: Tarjoaa ajoitustietoa sivun latausprosessin eri vaiheista, kuten DNS-hausta, TCP-yhteydestä, pyyntö- ja vastausajoista sekä DOM-käsittelystä.
Resource Timing API: Tarjoaa ajoitustietoa yksittäisille sivun lataamille resursseille, kuten kuville, skripteille ja tyylisivuille. Tämä on korvaamatonta ymmärrettäessä, mitkä resurssit vaikuttavat eniten latausaikoihin, erityisesti kun tarjotaan eri kuvatarkkuuksia laitteen ja alueen perusteella (esim. WebP-kuvien tarjoaminen tuetuille selaimille paremman pakkauksen saavuttamiseksi).
User Timing API: Antaa kehittäjille mahdollisuuden määrittää omia suorituskykymittareita ja merkitä tiettyjä kohtia koodissa suoritusajan mittaamiseksi.
Paint Timing API: Tarjoaa mittareita, jotka liittyvät sisällön renderöintiin näytöllä, kuten First Paint (FP) ja First Contentful Paint (FCP).
Largest Contentful Paint (LCP): Raportoi näkymäalueella näkyvän suurimman kuvan tai tekstilohkon renderöintiajan suhteessa siihen, milloin sivu alkoi ensimmäisen kerran latautua. Tämä on keskeinen mittari Googlen Core Web Vitals -mittareissa.
First Input Delay (FID): Mittaa ajan siitä, kun käyttäjä ensimmäisen kerran vuorovaikuttaa sivun kanssa (esim. napsauttaa linkkiä, napauttaa painiketta tai käyttää mukautettua, JavaScript-pohjaista ohjainta) siihen hetkeen, kun selain pystyy todella aloittamaan tapahtumankäsittelijöiden prosessoinnin vastauksena tähän vuorovaikutukseen.
Cumulative Layout Shift (CLS): Mittaa kaikkien odottamattomien asettelun muutosten summan, jotka tapahtuvat sivun koko elinkaaren aikana.

Sivun latausmittareiden kerääminen Navigation Timing API:n avulla

Navigation Timing API tarjoaa runsaasti tietoa sivun latausprosessista. Pääset käsiksi näihin tietoihin käyttämällä JavaScriptin performance.timing-ominaisuutta.

Esimerkki: Navigoinnin ajoitustietojen kerääminen

Tässä on esimerkki siitä, kuinka voit kerätä Navigation Timing -tietoja ja tulostaa ne konsoliin:


if (window.performance && window.performance.timing) {
  const timing = window.performance.timing;
  console.log('Navigation Start:', timing.navigationStart);
  console.log('Fetch Start:', timing.fetchStart);
  console.log('Domain Lookup Start:', timing.domainLookupStart);
  console.log('Domain Lookup End:', timing.domainLookupEnd);
  console.log('Connect Start:', timing.connectStart);
  console.log('Connect End:', timing.connectEnd);
  console.log('Request Start:', timing.requestStart);
  console.log('Response Start:', timing.responseStart);
  console.log('Response End:', timing.responseEnd);
  console.log('DOM Loading:', timing.domLoading);
  console.log('DOM Interactive:', timing.domInteractive);
  console.log('DOM Complete:', timing.domComplete);
  console.log('Load Event Start:', timing.loadEventStart);
  console.log('Load Event End:', timing.loadEventEnd);
}

Tärkeää: performance.timing-olio on vanhentunut ja korvattu PerformanceNavigationTiming-rajapinnalla. Jälkimmäisen käyttö on suositeltavaa nykyaikaisissa selaimissa.

PerformanceNavigationTiming-rajapinnan käyttö


if (window.performance && window.performance.getEntriesByType) {
  const navigationEntries = performance.getEntriesByType('navigation');

  if (navigationEntries && navigationEntries.length > 0) {
    const navigationEntry = navigationEntries[0];

    console.log('Navigation Type:', navigationEntry.type); // esim. 'navigate', 'reload', 'back_forward'
    console.log('Navigation Start:', navigationEntry.startTime);
    console.log('Fetch Start:', navigationEntry.fetchStart);
    console.log('Domain Lookup Start:', navigationEntry.domainLookupStart);
    console.log('Domain Lookup End:', navigationEntry.domainLookupEnd);
    console.log('Connect Start:', navigationEntry.connectStart);
    console.log('Connect End:', navigationEntry.connectEnd);
    console.log('Request Start:', navigationEntry.requestStart);
    console.log('Response Start:', navigationEntry.responseStart);
    console.log('Response End:', navigationEntry.responseEnd);
    console.log('DOM Interactive:', navigationEntry.domInteractive);
    console.log('DOM Complete:', navigationEntry.domComplete);
    console.log('Load Event Start:', navigationEntry.loadEventStart);
    console.log('Load Event End:', navigationEntry.loadEventEnd);
    console.log('Duration:', navigationEntry.duration);


    // Laske Time to First Byte (TTFB)
    const ttfb = navigationEntry.responseStart - navigationEntry.requestStart;
    console.log('TTFB:', ttfb);

    // Laske DOM-latausaika
    const domLoadTime = navigationEntry.domComplete - navigationEntry.domLoading;
    console.log('DOM Load Time:', domLoadTime);

    // Laske sivun latausaika
    const pageLoadTime = navigationEntry.loadEventEnd - navigationEntry.startTime;
    console.log('Page Load Time:', pageLoadTime);
  }
}

Navigoinnin ajoitusmittareiden ymmärtäminen

Tässä on erittely joistakin keskeisistä Navigation Timing API:n tarjoamista mittareista:

navigationStart: Aika, jolloin navigointi dokumenttiin alkaa.
fetchStart: Aika, jolloin selain alkaa noutaa dokumenttia.
domainLookupStart: Aika, jolloin selain aloittaa dokumentin verkkotunnuksen DNS-haun.
domainLookupEnd: Aika, jolloin selain saa dokumentin verkkotunnuksen DNS-haun valmiiksi.
connectStart: Aika, jolloin selain alkaa muodostaa yhteyttä palvelimeen.
connectEnd: Aika, jolloin selain saa yhteyden muodostamisen palvelimeen valmiiksi. Harkitse CDN:n käytön vaikutusta eri alueilla; hyvin konfiguroitu CDN voi merkittävästi lyhentää yhteysaikoja käyttäjille ympäri maailmaa.
requestStart: Aika, jolloin selain alkaa lähettää pyyntöä palvelimelle.
responseStart: Aika, jolloin selain vastaanottaa ensimmäisen tavun vastauksesta palvelimelta. Tämä on lähtökohta Time to First Byte (TTFB) -mittarille.
responseEnd: Aika, jolloin selain vastaanottaa viimeisen tavun vastauksesta palvelimelta.
domLoading: Aika, jolloin selain alkaa jäsentää HTML-dokumenttia.
domInteractive: Aika, jolloin selain on saanut HTML-dokumentin jäsennyksen valmiiksi ja DOM on valmis. Käyttäjä voi olla vuorovaikutuksessa sivun kanssa, vaikka jotkin resurssit saattavat vielä latautua.
domComplete: Aika, jolloin selain on saanut HTML-dokumentin jäsennyksen valmiiksi ja kaikki resurssit (kuvat, skriptit jne.) ovat latautuneet.
loadEventStart: Aika, jolloin load-tapahtuma alkaa.
loadEventEnd: Aika, jolloin load-tapahtuma päättyy. Tätä pidetään usein hetkenä, jolloin sivu on täysin latautunut.
duration: Navigointiin kulunut kokonaisaika. Saatavilla PerformanceNavigationTiming-rajapinnalla.

Sivun latausmittareiden analysointi optimointia varten

Kun olet kerännyt sivun latausmittareita, seuraava vaihe on analysoida ne optimointikohteiden tunnistamiseksi. Tässä on joitakin keskeisiä strategioita:

1. Tunnista pullonkaulat

Tutkimalla Navigation Timing -tietoja voit paikantaa sivun latausprosessin vaiheet, jotka kestävät pisimpään. Esimerkiksi, jos domainLookupEnd - domainLookupStart on korkea, se viittaa DNS-resoluutio-ongelmaan. Jos responseEnd - responseStart on korkea, se viittaa hitaaseen palvelimen vastausaikaan tai suureen sisältömäärään.

Esimerkki: Kuvittele tilanne, jossa connectEnd - connectStart on merkittävästi korkeampi Etelä-Amerikassa oleville käyttäjille verrattuna Pohjois-Amerikan käyttäjiin. Tämä voi viitata tarpeeseen käyttää CDN:ää, jolla on läsnäolopisteitä (PoP) lähempänä eteläamerikkalaisia käyttäjiä.

2. Optimoi palvelimen vastausaika (TTFB)

Time to First Byte (TTFB) on ratkaiseva mittari, joka mittaa ajan, joka kuluu selaimen vastaanottaessa ensimmäisen datatavun palvelimelta. Korkea TTFB voi vaikuttaa merkittävästi koko sivun latausaikaan.

Strategioita TTFB:n parantamiseksi:

Optimoi palvelinpuolen koodi: Paranna palvelinpuolen koodin tehokkuutta lyhentääksesi HTML-vastauksen generointiin kuluvaa aikaa. Käytä profilointityökaluja hitaiden kyselyiden tai tehottomien algoritmien tunnistamiseen.
Käytä sisällönjakeluverkkoa (CDN): CDN voi välimuistittaa verkkosivustosi sisällön ja tarjoilla sen käyttäjiäsi lähempänä olevilta palvelimilta, mikä vähentää viivettä ja parantaa TTFB:tä. Harkitse CDN:iä, joilla on vankka globaali verkosto palvellaksesi käyttäjiä eri alueilla.
Ota HTTP-välimuisti käyttöön: Määritä palvelimesi lähettämään asianmukaiset HTTP-välimuistiohjeet, jotta selaimet voivat välimuistittaa staattisia resursseja. Tämä voi merkittävästi vähentää palvelimelle tehtävien pyyntöjen määrää ja parantaa TTFB:tä seuraavilla sivulatauksilla. Hyödynnä selaimen välimuistia tehokkaasti.
Optimoi tietokantakyselyt: Hitaat tietokantakyselyt voivat vaikuttaa merkittävästi TTFB:hen. Optimoi kyselysi käyttämällä indeksejä, välttämällä kokonaisia taulukon skannauksia ja välimuistittamalla usein käytettyjä tietoja.
Käytä nopeampaa web-isäntää: Jos nykyinen web-isäntäsi on hidas, harkitse vaihtamista nopeampaan.

3. Optimoi resurssien lataaminen

Resource Timing API tarjoaa yksityiskohtaista tietoa yksittäisten resurssien, kuten kuvien, skriptien ja tyylisivujen, latausajasta. Käytä näitä tietoja tunnistaaksesi resurssit, joiden lataaminen kestää kauan, ja optimoi ne.

Strategioita resurssien lataamisen optimoimiseksi:

Pakkaa kuvat: Käytä kuvien optimointityökaluja kuvien pakkaamiseen laadusta tinkimättä. Harkitse nykyaikaisten kuvamuotojen, kuten WebP:n, käyttöä, jotka tarjoavat paremman pakkauksen kuin JPEG ja PNG. Tarjoa eri kuvatarkkuuksia käyttäjän laitteen ja näytön koon mukaan käyttämällä <picture>-elementtiä tai responsiivisia kuvatekniikoita.
Minifioi CSS ja JavaScript: Poista tarpeettomat merkit ja välilyönnit CSS- ja JavaScript-tiedostoistasi niiden koon pienentämiseksi.
Paketoi CSS- ja JavaScript-tiedostot: Yhdistä useita CSS- ja JavaScript-tiedostoja harvemmiksi tiedostoiksi vähentääksesi HTTP-pyyntöjen määrää. Käytä paketoimiseen työkaluja, kuten Webpack, Parcel tai Rollup.
Viivästytä ei-kriittisten resurssien lataamista: Lataa ei-kriittiset resurssit (esim. näkymän alapuolella olevat kuvat) asynkronisesti käyttämällä tekniikoita, kuten laiskalatausta (lazy loading).
Käytä CDN:ää staattisille resursseille: Tarjoa staattiset resurssit (kuvat, CSS, JavaScript) CDN:stä latausaikojen parantamiseksi.
Priorisoi kriittiset resurssit: Käytä <link rel="preload"> -määritystä priorisoidaksesi kriittisten resurssien, kuten CSS:n ja fonttien, lataamista parantaaksesi sivun alkuperäistä renderöintiä.

4. Optimoi renderöinti

Optimoi tapa, jolla verkkosivustosi renderöityy parantaaksesi käyttäjäkokemusta. Keskeisiä mittareita ovat First Paint (FP), First Contentful Paint (FCP) ja Largest Contentful Paint (LCP).

Strategioita renderöinnin optimoimiseksi:

Optimoi CSS:n toimitus: Toimita CSS tavalla, joka estää renderöinnin estymisen. Käytä tekniikoita, kuten kriittistä CSS:ää, sisällyttääksesi alkuperäiseen näkymään tarvittavan CSS:n ja ladataksesi loput CSS:stä asynkronisesti.
Vältä pitkäkestoisia JavaScript-tehtäviä: Pilko pitkäkestoiset JavaScript-tehtävät pienemmiksi osiksi estääksesi pääsäikeen tukkeutumisen.
Käytä web workereita: Siirrä laskennallisesti raskaat tehtävät web workereille välttääksesi pääsäikeen tukkeutumisen.
Optimoi JavaScriptin suoritus: Käytä tehokasta JavaScript-koodia ja vältä tarpeettomia DOM-manipulaatioita. Virtuaaliset DOM-kirjastot, kuten React, Vue ja Angular, voivat auttaa optimoimaan DOM-päivityksiä.
Vähennä asettelun muutoksia: Minimoi odottamattomat asettelun muutokset parantaaksesi visuaalista vakautta. Varaa tilaa kuville ja mainoksille estääksesi sisällön hyppimisen sivun latautuessa. Käytä Cumulative Layout Shift (CLS) -mittaria tunnistaaksesi alueet, joilla asettelun muutoksia tapahtuu.
Optimoi fontit: Käytä web-fontteja tehokkaasti esilataamalla ne, käyttämällä font-display: swap; -ominaisuutta näkymättömän tekstin välttämiseksi ja käyttämällä fonttien osajoukkoja pienentääksesi fonttitiedostojen kokoa. Harkitse järjestelmäfonttien käyttöä soveltuvissa tapauksissa.

5. Seuraa suorituskykyä jatkuvasti

Verkkosivuston suorituskyky ei ole kertaluonteinen korjaus. On olennaista seurata suorituskykyä jatkuvasti tunnistaaksesi ja korjataksesi uusia pullonkauloja niiden ilmaantuessa. Käytä suorituskyvyn seurantatyökaluja seurataksesi keskeisiä mittareita ajan mittaan ja aseta hälytyksiä ilmoittamaan, kun suorituskyky heikkenee. Tarkasta verkkosivustosi suorituskyky säännöllisesti työkaluilla, kuten Google PageSpeed Insights, WebPageTest ja Lighthouse. Harkitse todellisten käyttäjien seurannan (Real User Monitoring, RUM) käyttöönottoa kerätäksesi suorituskykytietoja oikeilta käyttäjiltä eri sijainneista.

User Timing API:n hyödyntäminen mukautetuissa mittareissa

User Timing API antaa sinun määrittää omia suorituskykymittareita ja mitata tiettyjen koodiosioiden suoritukseen kuluvaa aikaa. Tämä voi olla hyödyllistä mukautettujen komponenttien tai tiettyjen käyttäjäinteraktioiden suorituskyvyn seuraamisessa.

Esimerkki: Mukautetun mittarin mittaaminen


// Aloita mittaus
performance.mark('start-custom-metric');

// Suorita jokin operaatio
// ... koodisi tähän ...

// Lopeta mittaus
performance.mark('end-custom-metric');

// Laske kesto
performance.measure('custom-metric', 'start-custom-metric', 'end-custom-metric');

// Hae mittaustulos
const measures = performance.getEntriesByType('measure');
if (measures && measures.length > 0) {
  const customMetric = measures[0];
  console.log('Custom Metric Duration:', customMetric.duration);
}

Todellisten käyttäjien seuranta (RUM) globaaleihin suorituskykytietoihin

Vaikka synteettinen testaus (esim. Lighthousen avulla) tarjoaa arvokkaita näkemyksiä, todellisten käyttäjien seuranta (Real User Monitoring, RUM) antaa tarkemman kuvan siitä, miten verkkosivustosi toimii todellisille käyttäjille eri paikoissa ja erilaisissa verkko-olosuhteissa. RUM kerää suorituskykytietoja suoraan käyttäjien selaimista ja tarjoaa näkemyksiä keskeisistä mittareista, kuten sivun latausajasta, TTFB:stä ja virhetasoista. Harkitse sellaisten RUM-työkalujen käyttöä, jotka mahdollistavat datan segmentoinnin maantieteellisen sijainnin, laitteen, selaimen ja verkkotyypin mukaan tunnistaaksesi tiettyihin käyttäjäsegmentteihin liittyviä suorituskykyongelmia.

Huomioitavaa globaalissa RUM-toteutuksessa:

Tietosuoja: Varmista tietosuoja-asetusten, kuten GDPR:n ja CCPA:n, noudattaminen käyttäjätietoja kerättäessä. Anonymisoi tai pseudonymisoi arkaluontoiset tiedot mahdollisuuksien mukaan.
Otantamenetelmät: Harkitse otannan käyttöä kerätyn datan määrän vähentämiseksi ja vaikutuksen minimoimiseksi käyttäjän suorituskykyyn.
Maantieteellinen segmentointi: Segmentoi RUM-datasi maantieteellisen alueen mukaan tunnistaaksesi tiettyihin sijainteihin liittyviä suorituskykyongelmia.
Verkko-olosuhteet: Seuraa suorituskykyä eri verkkotyypeissä (esim. 3G, 4G, Wi-Fi) ymmärtääksesi, miten verkko-olosuhteet vaikuttavat käyttäjäkokemukseen.

Oikeiden työkalujen valinta

Useat työkalut voivat auttaa sinua keräämään ja analysoimaan sivun latausmittareita. Joitakin suosittuja vaihtoehtoja ovat:

Google PageSpeed Insights: Ilmainen työkalu, joka analysoi verkkosivustosi suorituskykyä ja antaa parannusehdotuksia.
WebPageTest: Ilmainen työkalu, jonka avulla voit testata verkkosivustosi suorituskykyä eri sijainneista ja selaimista.
Lighthouse: Avoimen lähdekoodin työkalu, joka tarkastaa verkkosivustosi suorituskyvyn, saavutettavuuden ja SEO:n. Se on integroitu Chrome DevTools -työkaluihin.
New Relic: Kattava valvontaalusta, joka tarjoaa reaaliaikaisia näkemyksiä verkkosivustosi suorituskyvystä.
Datadog: Valvonta- ja analytiikka-alusta, joka tarjoaa todellisten käyttäjien seurantaa ja synteettisen testauksen ominaisuuksia.
Sentry: Virheenseuranta- ja suorituskyvyn valvontaalusta, joka auttaa sinua tunnistamaan ja korjaamaan suorituskykyongelmia.

Yhteenveto

Frontend-suorituskyvyn optimointi on jatkuva prosessi, joka vaatii jatkuvaa seurantaa, analysointia ja optimointia. Hyödyntämällä Frontend-suorituskyky-API:a ja muita työkaluja voit saada arvokkaita näkemyksiä verkkosivustosi suorituskyvystä ja tunnistaa parannuskohteita. Muista ottaa huomioon yleisösi globaali luonne ja optimoida käyttäjille eri paikoissa ja vaihtelevissa verkko-olosuhteissa. Keskittymällä käyttäjäkokemukseen ja seuraamalla jatkuvasti suorituskykyä voit varmistaa, että verkkosivustosi tarjoaa nopean ja reagoivan kokemuksen kaikille käyttäjille, riippumatta siitä, missä päin maailmaa he ovat. Näiden strategioiden toteuttaminen auttaa sinua luomaan nopeamman, sitouttavamman ja menestyksekkäämmän verkkosivuston maailmanlaajuiselle yleisölle.